<template>
  <div id="home">
    <tab-control v-show="tabIsShow" class="tab" :title="['流行','新款','热销']" @tabClick="tabClick"></tab-control>
    <nav-bar class="home-nav"><div class="title" slot="center">主页</div></nav-bar>
    <scroll class="scroll" ref="scroll" :pullUpLoad="true" :probe-type="3" @tabShow="tabShow" @addPage="addPage" @sendOrdinate="backAppear">
      <swiper :banner="banner" @swpierImgLoad="tabOffsetTop"></swiper>
      <recommend :recommend="recommend"></recommend>
      <feature></feature>
      <tab-control :title="['流行','新款','热销']" @tabClick="tabClick" ref="tab"></tab-control>
      <goods-list :goodsData="showGoods"></goods-list>
    </scroll>
    <back @click.native="backTop" v-show="backShow"></back>
  </div>
</template>

<script>
  import navBar from 'components/common/navBar/navBar.vue'
  import scroll from 'components/common/scroll/scroll.vue'
  import back from 'components/common/backTop/backTop.vue'

  import {debounce} from '../../common/utils.js'

  import tabControl from 'components/content/Tab/TabControl'
  import goodsList from 'components/content/Goods/goodsList'

  import Swiper from './components/swiper.vue'
  import Recommend from './components/recommend.vue'
  import feature from './components/feature.vue'

  import {homeGetData,homeGetGoodsData} from 'network/home/home.js'

  export default{
    name:'home',
    data(){
      return {
          banner:[],
          dKeyword:[],
          keyword:[],
          recommend:[],
          goods:{
            'pop':{page:0,list:[]},
            'new':{page:0,list:[]},
            'sell':{page:0,list:[]}
          },
          actType:'pop',
          backShow:false,
          tabTop:0,
          tabIsShow:false,
          Y:0
       }
    },
    computed:{
      showGoods(){
        return this.goods[this.actType].list      //template中不要放长变量
      }
<<<<<<< HEAD

=======
>>>>>>> 84093be (second)
    },
    methods:{
      homeGetData(){
        homeGetData().then(res=>{
          this.banner=res.data.banner.list
          this.dKeyword=res.data.dKeyword.list
          this.keyword=res.data.keyword
          this.recommend=res.data.recommend.list
        })
      },
      homeGetGoods(type){
        let page=this.goods[type].page+1
        homeGetGoodsData(type,page).then(res=>{
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page++
        })
      },
      tabClick(typeName){
        this.actType=typeName
      },
      backTop(){
        this.$refs.scroll.scrollTo(0,0,1000)
      },
      backAppear(position){
        this.backShow=Math.abs(position.y)>600
      },
      addPage(){
        this.homeGetGoods(this.actType,this.goods[this.actType].page)
        this.$refs.scroll.finishPullUp()
        // this.$refs.scroll.refresh()
      },
      //在scroll中,对tab使用fixed定位无效  下面两个用于确保tab固定
      tabOffsetTop(){
        this.tabTop=this.$refs.tab.$el.offsetTop
      },
      tabShow(position){
        this.tabIsShow=this.tabTop<-position.y
      },
      refresh(){
        debounce(this.$refs.scroll.refresh,10)
      }
    },
    components:{
      navBar,Swiper,Recommend,
      feature,tabControl,goodsList,
      scroll,back
    },
    created() {       //created尽量简洁
      this.homeGetData(),
      this.homeGetGoods('pop'),
      this.homeGetGoods('new'),
      this.homeGetGoods('sell')
    },
    mounted() {
      this.$bus.$on('homeImgLoadOver',()=>{   //事件总线获取事件
        this.refresh()
      })
    },
    destroyed() {
      console.log('des')
    },
    deactivated() {
      this.Y=this.$refs.scroll.getY()
      // this.s=this.$refs.scroll
      this.$bus.$off('homeImgLoadOver',()=>{   //事件总线获取事件
        this.refresh()
      })
    },
    activated(){
      // console.log(this.$refs.scroll===this.s)
      this.$refs.scroll.refresh()
      this.$refs.scroll.scrollTo(0,this.Y,500)
      this.$refs.scroll.refresh()
    }
  }
</script>

<style scoped>
  #home {
    /* padding-bottom: 2000px; */
    height: 100vh;       /* !!!! */
    position: relative;
    /* padding-top: 44px; */
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    height: 44px;
    font-size: 16px;
  }

  .title{
    margin: 0 auto;
  }
  .tab-fixed {
    position: fixed;
    top: 44px;
    z-index: 9;
  }

  .scroll{
    height: calc(100% - 93px);
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }

  .tab{
    width: 100%;
    position: fixed;
    top: 44px;
    z-index: 9;
  }
</style>
